<template>
  <div class="padding-lg">
    <div class="search-box">
      <el-form ref="searchForm" :inline="true" size="mini" :model="searchForm">
        <search-form-box :show-more-btn="true">
          <template slot="showSearch">
            <el-form-item label="收款单位：" prop="bill_receipt_company">
              <el-input v-model="searchForm.bill_receipt_company" placeholder="请输入收款单位" clearable/>
            </el-form-item>
            <el-form-item label="子公司：" prop="dept_id">
              <el-select v-model="searchForm.dept_id" filterable clearable placeholder="请选择子公司"
                         style="width: 240px"
              >
                <el-option v-for="item in companyArr" :key="item.id" :value="item.id" :label="item.head"/>
              </el-select>
            </el-form-item>
            <el-form-item label="发票类型：" prop="dept_id">
              <el-select v-model="searchForm.invoice_type_id" filterable clearable placeholder="请选择发票类型">
                <el-option v-for="item in invoice_type_arr" :key="item.id" :value="item.id" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="开票类目：" prop="invoice_category_id">
              <el-select v-model="searchForm.invoice_category_id" filterable clearable placeholder="请选择开票类目">
                <el-option v-for="item in invoice_category_arr" :key="item.id" :value="item.id" :label="item.name"/>
              </el-select>
            </el-form-item>
            <el-form-item label="状态：" prop="flow_status">
              <el-select v-model="searchForm.flow_status" filterable clearable placeholder="请选择流程状态">
                <el-option value="0" label="草稿箱"/>
                <el-option value="2" label="被退回"/>
                <el-option value="3" label="流程中"/>
                <el-option value="4" label="已通过"/>
              </el-select>
            </el-form-item>
          </template>
          <template slot="hideSearch">
            <el-form-item label="开票日期：" prop="invoice_date_start">
              <el-date-picker v-model="searchForm.invoice_date_start" type="date" placeholder="选择日期"
                              value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
              />
            </el-form-item>
            <el-form-item label="至" prop="latest_up_date_end">
              <el-date-picker v-model="searchForm.invoice_date_end" type="date" placeholder="选择日期"
                              value-format="yyyy-MM-dd" format="yyyy年MM月dd日" style="width: 180px"
              />
            </el-form-item>
          </template>
          <template slot="searchBtn">
            <el-form-item>
              <el-button type="primary" @click="search">查询</el-button>
              <el-button @click="resetForm('searchForm')">重置</el-button>
            </el-form-item>
          </template>
        </search-form-box>
      </el-form>
    </div>
    <div class="table-box">
      <el-table v-loading="tableLoading" :data="tableData" size="mini" border>
        <el-table-column type="index" label="序号" width="50" align="center">
          <template slot-scope="scope">
            <span>{{ (listParams.page - 1) * listParams.page_size + scope.$index + 1 }}</span>
          </template>
        </el-table-column>
        <el-table-column prop="bill_receipt_company" label="开票类型" width="200" align="center"/>
        <el-table-column prop="contract_num" label="合同编号" width="200" align="center"/>
        <el-table-column prop="project_name" label="项目" width="200" align="center"/>
        <el-table-column label="合同执行时间" width="200" align="center">
          <template slot-scope="scope">
            <el-tag size="mini">
              {{
                scope.row.contract_begin_date ? scope.row.contract_begin_date + '~' + scope.row.contract_end_date : ''
              }}
            </el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="dept_head" label="所属子公司" width="200" align="center"/>
        <el-table-column label="开票日期" width="200" align="center">
          <template slot-scope="scope">
            {{ scope.row.invoice_date ? scope.row.invoice_date : '' }}
          </template>
        </el-table-column>
        <el-table-column prop="flow_applyer_name" label="申请人" width="200" align="center"/>
        <el-table-column prop="invoice_type_name" label="发票类型" width="200" align="center"/>
        <el-table-column prop="invoice_category_name" label="开票类型" width="200" align="center"/>
        <el-table-column label="审核状态" fixed="right" width="80" show-overflow-tooltip align="center">
          <template slot-scope="scope">
            <el-tag v-if="scope.row.flow_status === 3" size="mini" type="primary">流程中</el-tag>
            <el-tag v-if="scope.row.flow_status === 4" size="mini" type="success">已通过</el-tag>
            <el-tag v-if="scope.row.flow_status === 2" size="mini" type="danger">被退回</el-tag>
            <el-tag v-if="scope.row.flow_status === 0" size="mini" type="info">草稿箱</el-tag>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="120" align="center">
          <template slot-scope="{row}">

            <el-button v-permission="'finance_look_invoice'" size="mini" type="primary"
                       @click="toLook(row.id)"
            >查看
            </el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <el-pagination :current-page.sync="searchForm.page" :page-sizes="[10,20,50,100, 200,400]"
                   layout="total, sizes, prev, pager, next, jumper" :page-size.sync="searchForm.page_size"
                   :total="total"
                   @size-change="handleSizeChange" @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import SearchFormBox from '@/components/SearchFormBox'
import { get_company } from '@/api/system/department'
import { list_all3rd_bycode_contrain_del_close } from '@/api/business/setting/dict'
import { list, upload } from '@/api/invoice'
import { upFileUrl } from '@/api/others'
import { getToken } from '@/utils/auth'

export default {
  components: { SearchFormBox },
  data() {
    return {
      searchForm: {
        bill_receipt_company: null,
        dept_id: null,
        invoice_type_id: null,
        invoice_category_id: null,
        invoice_date_start: null,
        invoice_date_end: null,
        total_amount_min: null,
        total_amount_max: null,
        manage: true,
        flow_status: null,
        page: 1,
        page_size: 10
      },
      listParams: {
        bill_receipt_company: null,
        dept_id: null,
        invoice_type_id: null,
        invoice_category_id: null,
        invoice_date_start: null,
        invoice_date_end: null,
        total_amount_min: null,
        total_amount_max: null,
        manage: false,
        flow_status: null,
        page: 1,
        page_size: 10
      },
      tableLoading: false,
      tableData: [],
      total: 0,
      companyArr: [],
      invoice_category_arr: [],
      invoice_type_arr: [],
      loading: {},
      tmpId: -1
    }
  },
  created() {
    this.getCompanyList()
    this.getInvoiceCategoryList()
    this.getInvoiceTypeList()
    this.getList()
  },
  methods: {
    toCreate() {
      this.$router.push({
        name: 'create_invoice_apply',
        params: {
          is_created: true
        }
      })
    },
    toLook(id) {
      this.$router.push({
        name: 'invoice_apply_detail',
        params: {
          id
        }
      })
    },
    getList() {
      this.listParams = Object.assign({}, this.searchForm)
      this.tableLoading = true
      list(this.listParams).then(res => {
        this.tableLoading = false
        this.tableData = res.data.records
        this.total = res.data.total
      }).catch(() => {
        this.tableLoading = false
        this.tableData = []
      })
    },
    search() {
      this.searchForm.page = 1
      this.getList()
    },
    resetForm() {
      this.$refs.searchForm.resetFields()
      this.getList()
    },
    handleSizeChange(val) {
      this.listParams.page_size = val
      this.getList()
    },
    handleCurrentChange(val) {
      this.listParams.page = val
      this.getList()
    },
    getCompanyList() { // 获取公司列表
      get_company().then(res => {
        this.companyArr = res.data
      })
    },
    // 获取开票类目数据
    getInvoiceCategoryList() {
      return list_all3rd_bycode_contrain_del_close({
        code: 'fpxg-kplm'
      })
        .then(res => {
          this.invoice_category_arr = res.data
        })
    },
    // 获取发票类型数据
    getInvoiceTypeList() {
      return list_all3rd_bycode_contrain_del_close({
        code: 'fpxg-fplx'
      })
        .then(res => {
          this.invoice_type_arr = res.data
        })
    }
  }
}
</script>

<style scoped>

</style>
